<template>
	<view class="container">
		<view class="information">
			基本信息
		</view>
		<view class="informationNumber">
			<view class="iN-1-b">
				<view>出库编号</view>
				<view style="color: #999999;">保存自动生成</view>
			</view>
			<view class="iN-1">
				<view>货品</view>
				<view class="HP-1">
					<span>{{setproductNames()}}</span>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 21rpx;"></view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class="GDS-1" v-for="(item,index) in list" :key="index">
				<view>货品：<span style="color: #999999;">{{item.productName|| ''}}</span></view>
				<view class="GDS-1-F">
					<view class="f1">总量:{{item.stock}}</view>
					<view class="f1">已出库:{{item.out}}</view>
					<view class="f1">待出库:{{item.should}}</view>
				</view>
				
				<view class="GDS-1-J" v-for="(item1,index1) in item.stockBatchInfoList" :key="index1">
					<view class="GDS-1-JL">
						{{settWarehouses(item1.wareHouseId)}}-{{item1.wareHouseName}}(余：{{item1.count}})</view>
					<view class="GDS-1-JR">
						<input type="number" @input="handleInput($event,index,index1)"
							v-model="item1.outboundCount" style="font-size: 24rpx;"
							placeholder="请输入数量" placeholder-style="font-size: 24rpx;" />
						件
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="submit">
			<u-button :loading='loading' :disabled="disabled" :custom-style="customStyleBtn1"
				@click="submit">确认</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getProductStockAndBatchInfo,
		getWarehouse,
		stockOutToCar
	} from '@/api/store.js'
	import {
		constructGroups
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none',

				},
				goods: [],
				queryParams: {
					pageNo: 1, //页码
					pageSize: 20, //条数
					skuIds: [],
					categoryId: '', //分类编号
					name: '', //商品名称
				},
				list: [], //库存数据
				columnslibrary: [],
				columnData: [],
				moneys: [],
				model:{}
			}
		},
		onLoad(options) {
			console.log('options:', options);
			
			this.queryParams.skuIds = JSON.parse(options.ids)
			this.queryParams.categoryId = options.categoryId
			this.queryParams.name = options.name
			this.getWarehouses()
			// this.getList()
		},
		methods: {
			submit() {
				let data = this.list.map(item => {
					return {
						...item,
						stockBatchInfoList: item.stockBatchInfoList.map(value => {
							return {
								...value,
								skuId: item.productId,
								productName: item.productName,
								unitName: item.unitName,
								count: value.outboundCount
							}
						})
					}
				}).flatMap(item => item.stockBatchInfoList).filter(item => item.count > 0)
				if(data.length>0){
					uni.showModal({
						title: '提示',
						content: '确认提交出库信息？',
						success: async res => {
							if (res.confirm) {
								let data = this.list.map(item => {
									return {
										...item,
										stockBatchInfoList: item.stockBatchInfoList.map(value => {
											return {
												...value,
												skuId: item.productId,
												productName: item.productName,
												unitName: item.unitName,
												count: value.outboundCount
											}
										})
									}
								}).flatMap(item => item.stockBatchInfoList).filter(item => item.count > 0).map(
									item => {
										return {
											skuId: item.skuId,
											batchNumber: item.batchNumber,
											count: Number(item.count),
											warehouseId: item.wareHouseId,
											productName: item.productName,
											unitName: item.unitName,
											wareHouseName: item.wareHouseName
										}
									})
								let res = await stockOutToCar(data)
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/work/outbound/onebillforAll'
									})
								}, 1000)
					
							}
						}
					});
				}else{
					uni.showToast({
						title:'请输入数量',
						icon:'none'
					})
				}
				


			},
			// 获取库存数据
			async getList() {
				let res = await getProductStockAndBatchInfo(this.queryParams)
				this.list = res?.data?.map(item => {
					return {
						...item,
						stockBatchInfoList: item.stockBatchInfoList.map(value => {
							return {
								...value,
								outboundCount: ''
							}
						})
					}
				})
			},
			lower() {

			},
			// 获取仓库货位列表
			async getWarehouses() {
				let response = await getWarehouse()
				this.moneys = response.data.list
				const arr = response.data.list.map(item => {
					return {
						id: item.parentId ? null : item.id,
						name: item.name,
						parentId: item.parentId,
					}
				})
				let objs = constructGroups(arr)
				this.columnslibrary = objs.columns
				this.columnData = objs.columnData
				this.getList()
			},
			settWarehouses(id) {
				let i = this.moneys.filter(item => item.id == id)
				console.log('i:', i[0].parentId);
				let y = this.moneys.filter(item => item.id == i[0].parentId)
				console.log('Y:', y);
				return y[0].name
			},
			// 总数量
			productsTotal(items) {
				const totalQuantity = items.reduce((sum, item) => sum + item.count, 0);
				return totalQuantity
			},
			// 已出库
			outOfStock(items) {
				let totalQuantity = items.reduce((sum, item) => Number(sum) + Number(item.outboundCount), 0);
				return totalQuantity
			},
			// 待出库数量
			remainingQuantity(items) {
				const totalQuantity = items.reduce((sum, item) => sum + item.count, 0);
				const totalDiscount = items.reduce((sum, item) => sum + item.outboundCount, 0);
				return totalQuantity - totalDiscount;
			},
			handleInput(event, index, index1) {
				let value = event.detail.value
				let sum = this.list[index].should
				if (Number(value) > Number(sum)) {
					uni.showToast({
						title: '出库数量不能大于当前货位总数',
						icon: 'none'
					})
					this.$nextTick(()=>{
						this.list[index].stockBatchInfoList[index1].outboundCount = ''
					})
				}
				if (Number(value) == 0) {
					this.$nextTick(()=>{
						this.list[index].stockBatchInfoList[index1].outboundCount = ''
					})
				}
			},
			setproductNames(){
				const result = this.list.map(item => item.productName).join(',');
				console.log(result);
				return 
			}
		}
	}
</script>

<style scoped>
	.goods-y{
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		/* background-color: #333333; */
	}
	.f1 {
		width: 300rpx;
		height: 30rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 500rpx);
	}

	.submit {
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.GDS-1-JB {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.GDS-1-JR {
		flex: 1;
		height: 60rpx;
		border: 1rpx solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15rpx;
		padding: 0 19rpx 0 23rpx;
		box-sizing: border-box;
	}

	.GDS-1-JL {
		width: 400rpx;
		height: 60rpx;
		background-color: #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.GDS-1-J {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.GDS-1-F {
		display: flex;
		align-items: center;
		margin-top: 31rpx;
		margin-bottom: 43rpx;
	}

	.GDS-1 {
		width: 100%;
		min-height: 150rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 0rpx 29rpx 39rpx 28rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		margin-bottom: 15rpx;
	}

	.HP-1 {
		width: 300rpx;
		text-align: end;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		color: #999999;
	}

	.iN-1-b {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 0 27rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #999;
	}

	.iN-1 {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 0 27rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.informationNumber {
		width: 100%;
		min-height: 200rpx;
		display: flex;
		flex-direction: column;

	}

	.information {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 38rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #333333;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;

	}
</style>